<template lang="html">
  <div class="account">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addAccount">新增账号</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="currData" border style="width: 100%" ref="multipleTable">
      </el-form>
        <el-table-column prop="store_id" label="门店Id"></el-table-column>
        <el-table-column prop="store_name" label="所属门店名称"></el-table-column>
        <el-table-column prop="user_name" label="账号"></el-table-column>
        <el-table-column prop="real_name" label="用户真实姓名"></el-table-column>
        <el-table-column prop="mobile" label="用户手机号"></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" v-show="totalPages>1">
        <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
        </el-pagination>
    </div>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteRow">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="修改账号信息" :visible.sync="editVisible" width="500px" center>
      <el-form label-width="150px" @submit.native.prevent>
          <el-form-item label="门店Id">
            <el-input v-model="account.id" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="账户昵称">
            <el-input v-model="account.userName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="account.realName" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="account.mobile" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="账户密码">
            <el-input v-model="account.password" style="width:200px"></el-input>
          </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageIndex:1,//当前页码
      pageSize:10,//每页10条
      totalElements:1,//默认的总条数
      totalPages:1,//默认的总页数
      currData:[],
      delVisible:false, //是否显示删除弹出层
      delIndex:0,
      delId:0,
      editVisible: false,//是否显示编辑弹出层
      editId: 0,
      storeId: '',
      account:{
        id: '',
        userName: '',
        realName: '',
        password: '',
        mobile: '',
      }
    }
  },
  mounted(){
    this.getAccountList()
  },
  methods: {
    //分页
    handleCurrentChange(val){
        this.pageIndex = val;
        this.getAccountList();
    },
    onSubmit() {
      var reg = /^1[3456789]\d{9}$/
      if(this.account.id ==""){
          this.$message.error('请输入所属门店');
          return false;
      }
      else if(this.account.userName ==""){
          this.$message.error('请输入账号昵称');
          return false;
      }
      else if(this.account.realName ==""){
          this.$message.error('请输入用户真实姓名');
          return false;
      }
      else if(this.account.password==""){
          this.$message.error('请输入密码');
          return false;
      }
      else if(this.account.mobile==""){
          this.$message.error('请输入用户手机号码');
          return false;
      }
      // 验证手机号码是否匹配
      else if (!reg.test(this.account.mobile)) {
        this.$message.error('请输入正确的手机号码')
        return false;
      }
      else{
        const param =
        {
          id: this.account.id,
          userName: this.account.userName,
          realName: this.account.realName,
          password: this.account.password,
          mobile: this.account.mobile,
          pageIndex:this.pageIndex,
          pageSize:this.pageSize,
        }
       this.saveAccount(param);
      }
    },
    saveAccount(param) {
      var _this = this
      const querystring = require('querystring');
      this.$axios.post('/manage/store/account/modify',querystring.stringify(param)).then(response=>{
          
          if(response.data.code==200){
              this.$message({
                  message: '账号修改成功',
                  type: 'success'
              });
              _this.editVisible = false
              _this.getAccountList()

          }
          else{
              this.$notify.error({
                  title: '添加失败',
                  duration:2000,
                  message: '失败原因：'+response.data.msg
              });
          }

      }).catch(error=>{
          console.log(error);
      });
    },
    handleEdit(index, row){
      if (row.id && row.id > 0) {
        this.editVisible = true
        this.editId = row.id
        this.$axios.get('/manage/store/account/find', {
            params: {
            id: this.editId
            }
        })
        .then(response=>{
            if(response.data.code==200){
                //获取数据
                var res = response.data.data;
                this.account.id = res.id
                this.account.userName = res.user_name
                this.account.realName = res.real_name
                this.account.password = res.password
                this.account.mobile = res.mobile
            }else{
                this.$notify.error({
                    title: '查询失败',
                    duration:2000,
                    message: '失败原因：'+ response.data.msg
                });
            }
        })
        .catch(function (response) {
            console.log(response);
        });
    }
  },
    handleDelete (index,row){
      if(row.id && row.id>0){
          this.delVisible = true;
          this.delIndex = index;//当前要删除的下标
          this.delId = row.id;// 当前选中ID
      }
    },
    deleteRow (){
        //console.log("触发了确定");
        if(this.delId>0){
            const querystring = require('querystring');
            const param ={
                id:this.delId
            }
            this.$axios.post('/manage/store/account/delete',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code == 200){
                    this.currData.splice(this.delIndex, 1);
                    this.$message.success('删除成功');
                    this.delVisible = false;
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        }
    },
    getAccountList () {
      var _this = this
      this.$axios.get('manage/store/account/list',{params: {
        pageIndex:this.pageIndex,
        pageSize:this.pageSize
      }}).then((res) => {
        // console.log(res);
        if(res.data.code == 200){
          _this.totalElements = res.data.data.totalElements
          _this.totalPages = res.data.data.totalPages;//更新分页总条数
          _this.currData = res.data.data.currData

        }else{
            this.$notify.error({
                title: '获取账户列表失败',
                duration:2000,
                message: '失败原因：'+ res.data.msg
            })
        }
      }).catch(error=>{
          console.log(error);
      })
    },
    addAccount() {
      this.$router.push({path:"/store/account/add"});
    }
  }
}
</script>

<style lang="css">
</style>
